<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="main-title">{{guideData.title}}</text>
			<text class="route-overview">{{guideData.routeOverview}}</text>
		</view>
		
		<!-- 地图区域 -->
		<view class="map-section" :style="{height: mapHeight + 'px'}">
			<map 
				id="map" 
				class="map" 
				:longitude="mapCenter.longitude" 
				:latitude="mapCenter.latitude" 
				:scale="mapScale"
				:markers="currentMarkers"
				:polyline="currentPolyline"
				show-location="true"
				@markertap="onMarkerTap"
			></map>
		</view>
		
		<!-- 拖拽分隔条 -->
		<view class="drag-handle" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
			<view class="drag-indicator"></view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view class="content-section" :style="{height: contentHeight + 'px'}" scroll-y="true" enable-back-to-top="true">
			<!-- 天气Swiper -->
			<view class="weather-section">
				<view class="section-title">🌤️ 三日天气预报</view>
				<swiper class="weather-swiper" 
					:indicator-dots="true" 
					indicator-color="rgba(255,255,255,0.5)" 
					indicator-active-color="#1E90FF" 
					:circular="true"
					:autoplay="true"
					:interval="3000"
					:duration="500"
				>
					<swiper-item v-for="(weather, index) in guideData.weather.summary" :key="index">
						<view class="weather-card">
							<view class="weather-header">
								<view class="weather-date">{{formatDate(weather.day)}}</view>
								<view class="weather-icon">{{getWeatherIcon(weather.weather)}}</view>
							</view>
							<view class="weather-info">{{weather.weather}}</view>
							<view class="weather-temp">{{weather.temperature}}</view>
							<view class="weather-wind">{{weather.wind}}</view>
							<view class="weather-tips">💡 {{weather.tips}}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<!-- Tab标签页 -->
			<view class="tab-section">
				<view class="tab-header">
					<view 
						v-for="(day, index) in guideData.timeline" 
						:key="index" 
						:class="['tab-item', {active: activeTab === index}]"
						@tap="switchTab(index)"
					>
						<text class="tab-text">{{day.period}}</text>
					</view>
				</view>
				
				<!-- Tab内容 -->
				<view class="tab-content">
					<view class="timeline-container">
						<!-- 事件流 -->
						<view class="event-flow">
							<view 
								v-for="(event, eventIndex) in guideData.timeline[activeTab].events" 
								:key="eventIndex" 
								class="event-item"
								@tap="focusOnLocation(event.location)"
							>
								<view class="event-timeline">
									<view class="timeline-dot">
										<view class="timeline-dot-inner"></view>
									</view>
									<view class="timeline-line" v-if="eventIndex < guideData.timeline[activeTab].events.length - 1"></view>
								</view>
								<view class="event-content">
									<view class="event-time">
										<view class="time-icon">
											<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
												<circle cx="12" cy="12" r="9" stroke="#1E90FF" stroke-width="2"/>
												<path d="M12 7V12L15 15" stroke="#1E90FF" stroke-width="2" stroke-linecap="round"/>
											</svg>
										</view>
										{{event.time}}
									</view>
									<view class="event-card">
										<view class="event-title">{{event.title}}</view>
										<view class="event-address">
											<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
												<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#666666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
												<path d="M12 22C16 18 20 14.4183 20 10C20 5.58172 16.4183 2 12 2C7.58172 2 4 5.58172 4 10C4 14.4183 8 18 12 22Z" stroke="#666666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											</svg>
											{{event.address}}
										</view>
										<view class="event-description">{{event.description}}</view>
										<view class="event-details">
											<view v-if="event.ticket" class="detail-tag ticket">
												<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
													<path d="M2 10V8C2 7.46957 2.21071 6.96086 2.58579 6.58579C2.96086 6.21071 3.46957 6 4 6H20C20.5304 6 21.0391 6.21071 21.4142 6.58579C21.7893 6.96086 22 7.46957 22 8V10C21.4696 10 20.9609 10.2107 20.5858 10.5858C20.2107 10.9609 20 11.4696 20 12C20 12.5304 20.2107 13.0391 20.5858 13.4142C20.9609 13.7893 21.4696 14 22 14V16C22 16.5304 21.7893 17.0391 21.4142 17.4142C21.0391 17.7893 20.5304 18 20 18H4C3.46957 18 2.96086 17.7893 2.58579 17.4142C2.21071 17.0391 2 16.5304 2 16V14C2.53043 14 3.03914 13.7893 3.41421 13.4142C3.78929 13.0391 4 12.5304 4 12C4 11.4696 3.78929 10.9609 3.41421 10.5858C3.03914 10.2107 2.53043 10 2 10Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
												</svg>
												{{event.ticket}}
											</view>
											<view v-if="event.openingHours" class="detail-tag hours">
												<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
													<circle cx="12" cy="12" r="10" stroke="#333333" stroke-width="2"/>
													<path d="M12 6V12L16 14" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
												</svg>
												{{event.openingHours}}
											</view>
											<view v-if="event.transportInfo" class="detail-tag transport">
												<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
													<path d="M5 11L19 11" stroke="white" stroke-width="2" stroke-linecap="round"/>
													<path d="M8 15L6 19H18L16 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
													<rect x="3" y="5" width="18" height="10" rx="2" stroke="white" stroke-width="2"/>
													<circle cx="7" cy="15" r="1" fill="white"/>
													<circle cx="17" cy="15" r="1" fill="white"/>
												</svg>
												{{event.transportInfo}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<!-- 美食推荐 -->
						<view class="dining-section">
							<view class="section-title">
								<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M6 13.5V21M18 21V13.5M6 2V4.5M18 2V4.5M10.5 2V6.5C10.5 7.88071 9.38071 9 8 9C6.61929 9 5.5 7.88071 5.5 6.5V2M18.5 2V6.5C18.5 7.88071 17.3807 9 16 9C14.6193 9 13.5 7.88071 13.5 6.5V2M21.5 16H2.5C2.5 12.5 5.5 9.5 9 9.5H15C18.5 9.5 21.5 12.5 21.5 16Z" stroke="#1E90FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								</svg>
								{{guideData.dining.specialties.title}}
							</view>
							<view class="food-grid">
								<view class="food-item" v-for="(food, index) in guideData.dining.specialties.items" :key="index">
									<view class="food-icon">
										<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<path d="M7 10H17M7 14H17M11 18H13M6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z" stroke="#FF8C00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
									</view>
									<text class="food-name">{{food}}</text>
								</view>
							</view>
						</view>
						
						<!-- 实用提示 -->
						<view class="tips-section">
							<view class="section-title">
								<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#1E90FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								</svg>
								实用提示
							</view>
							<view class="tips-grid">
								<view class="tip-card" v-for="(tip, index) in guideData.tips" :key="index">
									<view class="tip-header">
										<view class="tip-icon" v-html="getSvgIcon(tip.icon)"></view>
										<text class="tip-title">{{tip.title}}</text>
									</view>
									<view class="tip-content" v-if="tip.content">{{tip.content}}</view>
									<view class="tip-items" v-if="tip.items">
										<text class="tip-item" v-for="(item, itemIndex) in tip.items" :key="itemIndex">• {{item}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 地图相关
				mapHeight: 400,
				contentHeight: 400,
				mapCenter: {
					longitude: 109.8,
					latitude: 19.2
				},
				mapScale: 8,
				markers: [],
				polyline: [],
				currentMarkers: [],
				currentPolyline: [],
				
				// 拖拽相关
				isDragging: false,
				startY: 0,
				startMapHeight: 0,
				
				// Tab相关
				activeTab: 0,
				
				// SVG图标
				svgIcons: {
					start: 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C12 22 20 18 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 18 12 22 12 22Z" fill="#228B22" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" fill="white"/></svg>'),
					middle: 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C12 22 20 18 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 18 12 22 12 22Z" fill="#1E90FF" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" fill="white"/></svg>'),
					end: 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C12 22 20 18 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 18 12 22 12 22Z" fill="#FFA500" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" fill="white"/></svg>')
				},
				
				guideData: {
					title: "海南三天两晚旅行攻略：海口-三亚-亚龙湾",
					weather: {
						summary: [
							{
								day: "2025-06-13",
								weather: "中雨转大雨",
								temperature: "25°C - 29°C",
								wind: "东南风3-4级",
								tips: "建议携带雨具，避免户外活动"
							},
							{
								day: "2025-06-14",
								weather: "大雨转多云",
								temperature: "25°C - 28°C",
								wind: "西南风3-4级",
								tips: "室内景点优先，注意防滑"
							},
							{
								day: "2025-06-15",
								weather: "雷阵雨转多云",
								temperature: "26°C - 34°C",
								wind: "北风1-3级",
								tips: "午后适合海滩活动"
							}
						]
					},
					routeOverview: "美兰机场→海口市区→三亚市区→亚龙湾→返程",
					timeline: [
						{
							period: "Day 1",
							events: [
								{
									time: "14:00",
									title: "抵达海口",
									address: "海口美兰机场",
									description: "从机场驱车14公里至市区（约30分钟）",
									transportInfo: "驾车14公里/30分钟",
									location: "110.329481,20.021112"
								},
								{
									time: "15:00",
									title: "骑楼老街",
									address: "海口市龙华区博爱路",
									description: "百年历史骑楼建筑群，可品尝海南粉、清补凉",
									ticket: "免费",
									openingHours: "09:00-21:00",
									location: "110.194686,20.012873"
								},
								{
									time: "18:00",
									title: "海南鸡饭",
									address: "海口琼菜王",
									description: "海南特色白切鸡配椰香饭",
									transportInfo: "距骑楼老街2公里/10分钟",
									location: "110.206759,20.008123"
								}
							]
						},
						{
							period: "Day 2",
							events: [
								{
									time: "09:00",
									title: "热带野生动植物园",
									address: "海口市琼山区",
									description: "亚洲最大热带动物园，含雨林栈道和动物表演",
									ticket: "168元",
									transportInfo: "距市区22公里/40分钟",
									openingHours: "08:30-17:30",
									location: "110.249376,19.892875"
								},
								{
									time: "12:30",
									title: "和乐蟹午餐",
									address: "三亚后海村",
									description: "海南四大名菜之一，推荐清蒸",
									transportInfo: "距动植物园120公里/2.5小时",
									location: "109.515731,18.333436"
								},
								{
									time: "15:30",
									title: "亚龙湾海滩",
									address: "三亚市亚龙湾",
									description: "绵延7公里的白沙滩，适合水上项目",
									ticket: "免费",
									transportInfo: "距后海村30公里/40分钟",
									location: "109.503816,18.252901"
								}
							]
						},
						{
							period: "Day 3",
							events: [
								{
									time: "09:00",
									title: "蜈支洲岛",
									address: "三亚市海棠湾",
									description: "5A级海岛，可体验海底漫步/摩托艇",
									ticket: "144元（船票+门票）",
									transportInfo: "距亚龙湾35公里/50分钟",
									openingHours: "08:00-17:00",
									location: "110.008434,18.662293"
								},
								{
									time: "18:00",
									title: "免税城购物",
									address: "三亚国际免税城",
									description: "亚洲最大单体免税店，含DFS环球港",
									transportInfo: "距蜈支洲岛25公里/40分钟",
									location: "109.536507,18.257863"
								}
							]
						}
					],
					dining: {
						specialties: {
							title: "海南必吃美食",
							items: [
								"海南鸡饭（白切鸡配椰香饭）",
								"和乐蟹（膏满肉肥）",
								"清补凉（热带水果甜汤）",
								"海南粉（酸辣米线）",
								"椰子鸡（椰奶炖鸡）"
							]
						}
					},
					tips: [
						{
							icon: "umbrella",
							color: "#1E90FF",
							title: "天气提示",
							content: "前两日有强降雨，建议携带防水背包和防滑鞋"
						},
						{
							icon: "car",
							color: "#FFA500",
							title: "交通建议",
							items: [
								"海口至三亚建议租车（约200元/天）",
								"海岛间交通可选择旅游巴士（45元/人）"
							]
						},
						{
							icon: "moneybag",
							color: "#228B22",
							title: "费用参考",
							items: [
								"三晚住宿：300-800元/晚",
								"景点门票：300-500元/人",
								"餐饮人均：50-150元/餐"
							]
						}
					]
				}
			}
		},
		onLoad() {
			this.initMap();
			this.initLayout();
		},
		methods: {
			// 初始化地图
			initMap() {
				// 为每一天创建标记点和路线
				this.createAllMapData();
				this.updateMapForActiveTab();
			},
			
			// 创建所有地图数据
			createAllMapData() {
				// 创建每一天的标记点和路线
				this.markers = [];
				this.polyline = [];
				
				// 处理每一天的数据
				this.guideData.timeline.forEach((day, dayIndex) => {
					const dayMarkers = [];
					const points = [];
					
					// 处理每个事件点
					day.events.forEach((event, eventIndex) => {
						// 解析位置
						const [longitude, latitude] = event.location.split(',').map(coord => parseFloat(coord));
						
						// 创建标记
						const marker = {
							id: dayIndex * 100 + eventIndex + 1,
							longitude,
							latitude,
							title: event.title,
							iconPath: eventIndex === 0 ? this.svgIcons.start : 
									 eventIndex === day.events.length - 1 ? this.svgIcons.end : 
									 this.svgIcons.middle,
							width: 30,
							height: 30,
							callout: {
								content: event.title,
								color: "#ffffff",
								fontSize: 12,
								borderRadius: 5,
								bgColor: dayIndex === 0 ? "#228B22" : dayIndex === 1 ? "#1E90FF" : "#FFA500",
								padding: 5,
								display: "BYCLICK"
							}
						};
						
						dayMarkers.push(marker);
						points.push({longitude, latitude});
					});
					
					// 添加到总数组
					this.markers.push(dayMarkers);
					
					// 创建路线
					if (points.length > 1) {
						const dayPolyline = {
							points: points,
							color: dayIndex === 0 ? "#228B22" : dayIndex === 1 ? "#1E90FF" : "#FFA500",
							width: 4,
							dottedLine: false,
							arrowLine: true
						};
						this.polyline.push(dayPolyline);
					}
				});
			},
			
			// 更新地图显示当前标签页的路线
			updateMapForActiveTab() {
				// 设置当前标记点和路线
				this.currentMarkers = this.markers[this.activeTab] || [];
				this.currentPolyline = [this.polyline[this.activeTab]].filter(Boolean);
				
				// 调整地图中心和缩放级别
				this.adjustMapView();
			},
			
			// 调整地图视图以适应当前路线
			adjustMapView() {
				if (!this.currentMarkers.length) return;
				
				// 如果只有一个点，直接居中
				if (this.currentMarkers.length === 1) {
					const marker = this.currentMarkers[0];
					this.mapCenter = {
						longitude: marker.longitude,
						latitude: marker.latitude
					};
					this.mapScale = 14;
					return;
				}
				
				// 计算边界
				let minLat = 90, maxLat = -90, minLng = 180, maxLng = -180;
				this.currentMarkers.forEach(marker => {
					minLat = Math.min(minLat, marker.latitude);
					maxLat = Math.max(maxLat, marker.latitude);
					minLng = Math.min(minLng, marker.longitude);
					maxLng = Math.max(maxLng, marker.longitude);
				});
				
				// 计算中心点
				const centerLat = (minLat + maxLat) / 2;
				const centerLng = (minLng + maxLng) / 2;
				
				// 设置地图中心
				this.mapCenter = {
					longitude: centerLng,
					latitude: centerLat
				};
				
				// 根据点的分布设置缩放级别
				const latDiff = maxLat - minLat;
				const lngDiff = maxLng - minLng;
				const maxDiff = Math.max(latDiff, lngDiff);
				
				// 根据距离调整缩放级别
				if (maxDiff > 1) this.mapScale = 7;
				else if (maxDiff > 0.5) this.mapScale = 9;
				else if (maxDiff > 0.1) this.mapScale = 11;
				else if (maxDiff > 0.05) this.mapScale = 12;
				else if (maxDiff > 0.01) this.mapScale = 13;
				else this.mapScale = 14;
			},
			
			// 初始化布局
			initLayout() {
				const systemInfo = uni.getSystemInfoSync();
				const screenHeight = systemInfo.windowHeight;
				this.mapHeight = Math.floor(screenHeight * 0.4);
				this.contentHeight = screenHeight - this.mapHeight - 60;
			},
			
			onMarkerTap(e) {
				const markerId = e.detail.markerId;
				const marker = this.currentMarkers.find(m => m.id === markerId);
				if (marker) {
					uni.showToast({
						title: marker.title,
						icon: 'none'
					});
				}
			},
			
			// 聚焦到特定位置
			focusOnLocation(locationStr) {
				if (!locationStr) return;
				
				const [longitude, latitude] = locationStr.split(',').map(coord => parseFloat(coord));
				this.mapCenter = { longitude, latitude };
				this.mapScale = 14;
				
				// 滚动到地图区域
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			
			// 拖拽处理
			handleTouchStart(e) {
				this.isDragging = true;
				this.startY = e.touches[0].clientY;
				this.startMapHeight = this.mapHeight;
			},
			handleTouchMove(e) {
				if (!this.isDragging) return;
				
				const deltaY = e.touches[0].clientY - this.startY;
				const newMapHeight = this.startMapHeight + deltaY;
				
				// 限制地图高度范围
				const minHeight = 150;
				const maxHeight = uni.getSystemInfoSync().windowHeight - 200;
				
				if (newMapHeight >= minHeight && newMapHeight <= maxHeight) {
					this.mapHeight = newMapHeight;
					this.contentHeight = uni.getSystemInfoSync().windowHeight - this.mapHeight - 60;
				}
			},
			handleTouchEnd() {
				this.isDragging = false;
				
				// 根据当前高度自动吸附到预设位置
				const systemInfo = uni.getSystemInfoSync();
				const screenHeight = systemInfo.windowHeight;
				
				// 如果拖动到接近全屏
				if (this.mapHeight > screenHeight * 0.7) {
					this.mapHeight = Math.floor(screenHeight * 0.8);
					this.contentHeight = screenHeight - this.mapHeight - 60;
				} 
				// 如果拖动到接近隐藏
				else if (this.mapHeight < screenHeight * 0.25) {
					this.mapHeight = 150;
					this.contentHeight = screenHeight - this.mapHeight - 60;
				}
				// 默认位置
				else if (Math.abs(this.mapHeight - screenHeight * 0.4) < 50) {
					this.mapHeight = Math.floor(screenHeight * 0.4);
					this.contentHeight = screenHeight - this.mapHeight - 60;
				}
			},
			
			// Tab切换
			switchTab(index) {
				this.activeTab = index;
				this.updateMapForActiveTab();
			},
			
			// 工具方法
			formatDate(dateStr) {
				const date = new Date(dateStr);
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${month}月${day}日`;
			},
			getIcon(iconName) {
				const icons = {
					umbrella: '☂️',
					car: '🚗',
					moneybag: '💰'
				};
				return icons[iconName] || '📌';
			},
			getSvgIcon(iconName) {
				if (iconName === 'umbrella') {
					return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#1E90FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>`;
				} else if (iconName === 'car') {
					return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M5 11L19 11" stroke="#FFA500" stroke-width="2" stroke-linecap="round"/>
								<path d="M8 15L6 19H18L16 15" stroke="#FFA500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								<rect x="3" y="5" width="18" height="10" rx="2" stroke="#FFA500" stroke-width="2"/>
								<circle cx="7" cy="15" r="1" fill="#FFA500"/>
								<circle cx="17" cy="15" r="1" fill="#FFA500"/>
							</svg>`;
				} else if (iconName === 'moneybag') {
					return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M2 10V8C2 7.46957 2.21071 6.96086 2.58579 6.58579C2.96086 6.21071 3.46957 6 4 6H20C20.5304 6 21.0391 6.21071 21.4142 6.58579C21.7893 6.96086 22 7.46957 22 8V10C21.4696 10 20.9609 10.2107 20.5858 10.5858C20.2107 10.9609 20 11.4696 20 12C20 12.5304 20.2107 13.0391 20.5858 13.4142C20.9609 13.7893 21.4696 14 22 14V16C22 16.5304 21.7893 17.0391 21.4142 17.4142C21.0391 17.7893 20.5304 18 20 18H4C3.46957 18 2.96086 17.7893 2.58579 17.4142C2.21071 17.0391 2 16.5304 2 16V14C2.53043 14 3.03914 13.7893 3.41421 13.4142C3.78929 13.0391 4 12.5304 4 12C4 11.4696 3.78929 10.9609 3.41421 10.5858C3.03914 10.2107 2.53043 10 2 10Z" stroke="#228B22" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>`;
				}
				return '📌'; // Default icon
			},
			getWeatherIcon(weather) {
				if (weather.includes('雨')) return '🌧️';
				if (weather.includes('多云')) return '⛅';
				if (weather.includes('雷')) return '⛈️';
				return '🌤️';
			}
		}
	}
</script>

<style>
	/* 全局容器 */
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #f5f5f5;
		overflow: hidden;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	}
	
	/* 顶部标题栏 */
	.header {
		padding: 30rpx 30rpx 20rpx;
		background: #1E90FF;
		color: white;
		text-align: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
	}
	
	.main-title {
		font-size: 36rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.route-overview {
		font-size: 26rpx;
		opacity: 0.9;
		display: block;
	}
	
	/* 地图区域 */
	.map-section {
		position: relative;
		background: #f0f8ff;
		border-bottom: 1rpx solid #e0e0e0;
		transition: height 0.3s ease;
	}
	
	.map {
		width: 100%;
		height: 100%;
	}
	
	/* 拖拽分隔条 */
	.drag-handle {
		height: 50rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 10;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
	}
	
	.drag-handle:active {
		background: #f0f8ff;
	}
	
	.drag-indicator {
		width: 100rpx;
		height: 8rpx;
		background: #1E90FF;
		border-radius: 10rpx;
		opacity: 0.6;
	}
	
	/* 内容区域 */
	.content-section {
		background: #f5f5f5;
		overflow: hidden;
		transition: height 0.3s ease;
	}
	
	/* 天气Swiper */
	.weather-section {
		padding: 20rpx;
		background: white;
		margin: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
		padding-left: 15rpx;
		border-left: 6rpx solid #1E90FF;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	
	.weather-swiper {
		height: 200rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.weather-card {
		height: 100%;
		background: linear-gradient(135deg, #1E90FF 0%, #4DA6FF 100%);
		color: white;
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		overflow: hidden;
	}
	
	.weather-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
		padding-top: 20rpx;
	}
	
	.weather-date {
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.weather-icon {
		font-size: 45rpx;
	}
	
	.weather-info {
		font-size: 24rpx;
		margin-bottom: 5rpx;
	}
	
	.weather-temp {
		font-size: 24rpx;
		margin-bottom: 5rpx;
		font-weight: bold;
	}
	
	.weather-wind {
		font-size: 22rpx;
		margin-bottom: 10rpx;
		opacity: 0.8;
	}
	
	.weather-tips {
		font-size: 22rpx;
		background: rgba(255, 255, 255, 0.2);
		padding: 10rpx 15rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}
	
	/* Tab标签页 */
	.tab-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin: 0 20rpx 20rpx;
		border-radius: 12rpx;
		background: white;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.tab-header {
		display: flex;
		background: white;
		border-radius: 12rpx 12rpx 0 0;
		overflow: hidden;
		border-bottom: 1rpx solid #e0e0e0;
	}
	
	.tab-item {
		flex: 1;
		padding: 25rpx 10rpx;
		text-align: center;
		transition: all 0.3s ease;
		position: relative;
		border-bottom: 4rpx solid transparent;
	}
	
	.tab-item.active {
		color: #1E90FF;
		border-bottom-color: #1E90FF;
	}
	
	.tab-text {
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.tab-content {
		flex: 1;
		background: white;
		border-radius: 0 0 12rpx 12rpx;
		overflow: hidden;
	}
	
	.timeline-container {
		padding: 25rpx;
	}
	
	/* 事件流 */
	.event-flow {
		margin-bottom: 35rpx;
		position: relative;
	}
	
	.event-flow::before {
		content: '';
		position: absolute;
		top: 12rpx;
		left: 25rpx;
		width: 3rpx;
		height: calc(100% - 24rpx);
		background: rgba(30, 144, 255, 0.2);
		z-index: 1;
	}
	
	.event-item {
		display: flex;
		margin-bottom: 35rpx;
		position: relative;
		z-index: 2;
	}
	
	.event-timeline {
		width: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 25rpx;
		position: relative;
	}
	
	.timeline-dot {
		width: 24rpx;
		height: 24rpx;
		background: #1E90FF;
		border-radius: 50%;
		border: 4rpx solid white;
		box-shadow: 0 0 0 3rpx rgba(30, 144, 255, 0.3);
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.timeline-dot-inner {
		width: 12rpx;
		height: 12rpx;
		background: white;
		border-radius: 50%;
	}
	
	.timeline-line {
		width: 3rpx;
		height: 100%;
		position: absolute;
		top: 24rpx;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(30, 144, 255, 0.3);
		z-index: 1;
	}
	
	.event-content {
		flex: 1;
		position: relative;
	}
	
	.event-time {
		font-size: 26rpx;
		color: #1E90FF;
		font-weight: bold;
		margin-bottom: 12rpx;
		background: #f0f8ff;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
	}
	
	.time-icon {
		margin-right: 8rpx;
		display: flex;
		align-items: center;
	}
	
	.event-card {
		background: white;
		border-radius: 12rpx;
		padding: 25rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.08);
		border-left: 5rpx solid #1E90FF;
		transition: transform 0.2s ease;
	}
	
	.event-card:active {
		transform: scale(0.98);
	}
	
	.event-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
	}
	
	.event-address {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;
	}
	
	.event-description {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		line-height: 1.6;
	}
	
	.event-details {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}
	
	.detail-tag {
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		color: white;
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 8rpx;
	}
	
	.detail-tag.ticket {
		background: #28a745;
	}
	
	.detail-tag.hours {
		background: #ffc107;
		color: #333;
	}
	
	.detail-tag.transport {
		background: #6f42c1;
	}
	
	/* 美食推荐 */
	.dining-section {
		margin-bottom: 35rpx;
		background: white;
		border-radius: 12rpx;
		padding: 25rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.08);
	}
	
	.food-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin-top: 15rpx;
	}
	
	.food-item {
		background: #f8f9ff;
		border-radius: 12rpx;
		padding: 25rpx 15rpx;
		border: 1rpx solid rgba(30, 144, 255, 0.2);
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
		transition: transform 0.2s ease;
	}
	
	.food-item:active {
		transform: scale(0.98);
	}
	
	.food-icon {
		font-size: 50rpx;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FF8C00;
	}
	
	.food-name {
		font-size: 26rpx;
		color: #333;
		line-height: 1.5;
	}
	
	/* 实用提示 */
	.tips-section {
		margin-bottom: 35rpx;
		background: white;
		border-radius: 12rpx;
		padding: 25rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.08);
	}
	
	.tips-grid {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-top: 15rpx;
	}
	
	.tip-card {
		background: #f8f9ff;
		border-radius: 12rpx;
		padding: 25rpx;
		border: 1rpx solid rgba(30, 144, 255, 0.2);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
		transition: transform 0.2s ease;
	}
	
	.tip-card:active {
		transform: scale(0.98);
	}
	
	.tip-header {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.tip-icon {
		font-size: 36rpx;
		margin-right: 15rpx;
		color: #1E90FF;
		display: flex;
		align-items: center;
	}
	
	.tip-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}
	
	.tip-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 15rpx;
	}
	
	.tip-items {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}
	
	.tip-item {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		padding-left: 20rpx;
		position: relative;
	}
	
	.tip-item::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 8rpx;
		background: #1E90FF;
		border-radius: 50%;
	}
	
	/* SVG样式 */
	svg {
		vertical-align: middle;
	}
	
	/* 响应式优化 */
	@media (max-width: 750rpx) {
		.food-grid {
			grid-template-columns: 1fr;
		}
		
		.main-title {
			font-size: 32rpx;
		}
		
		.event-card {
			padding: 20rpx;
		}
	}
</style>
